<template>
  <div>
    <!-- 左侧部分 -->
    <div style="display: flex; padding-top: 20px; padding-left: 30px">
      <div class="img-wrap">
        <img
          class="image"
          :src="productData.image && productData.image[radio1]"
        />
      </div>
      <!-- 右侧部分 -->
      <div class="right-wrap">
        <!-- 产品描述 -->
        <div class="des">{{ productData.description }}</div>
        <div class="mb-20">
          <span>价格:</span>
          <span class="price">{{ productData.price }}</span>
        </div>
        <div class="mb-20">
          <el-radio-group v-model="radio1">
            <el-radio-button
              v-for="(item, index) in productData.color"
              :label="index"
              :key="item.id"
              >{{ item }}</el-radio-button
            >
          </el-radio-group>
        </div>
        <div class="mb-20">
          <!-- <el-button type="primary">加入购物车</el-button> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["id"], // 获取路由地址上的参数
  data() {
    return {
      radio1: 0,
      // 产品数据
      productData: {},
    };
  },
  created() {
    // 发起get请求
    // url: /v1/home/phoneDetail?id=00000001
    axios.get("/v1/home/phoneDetail?id=" + this.id).then((res) => {
      console.log(res.data);
      this.productData = res.data;
    });
  },
};
</script>

<style>
.img-wrap {
  border: 1px solid #eee;
}
.image {
  width: 420px;
  height: 420px;
}
.des {
  font-size: 18px;
  margin-bottom: 20px;
}
.price {
  color: red;
  font-size: 18px;
}
.right-wrap {
  padding-top: 50px;
  padding-left: 30px;
  text-align: left;
}
.mb-20 {
  margin-bottom: 20px;
}
</style>
